Ext.namespace('App', 'App.document');
/**
 * App.document.Grid
 * A typical EditorGridPanel extension.
 */
App.document.Grid = Ext.extend(Ext.grid.EditorGridPanel, {
    //renderTo: 'user-grid',
    iconCls: 'silk-grid',
    frame: false,
    border: false,
    collapsible: false,
    animCollapse: false,
    //style: 'margin-top: 10px',
    stripeRows: true,
    application: null,
    
    linkedForm: null,
    record: null, // current editing record
    showConfigPanel: false,

    initComponent : function() {

        // relay the Store's CRUD events into this grid so these events can be conveniently listened-to in our application-code.
        this.relayEvents(this.store, ['destroy', 'save', 'update']);

        // build toolbars and buttons.
        this.tbar = this.buildTopToolbar();
        this.bbar = this.buildBottomToolbar();
        //this.buttons = this.buildUI();
        this.store.on('load', this.onStoreLoad, this);
        this.on('rowclick', this.onRowClick, this);

        // super
        App.document.Grid.superclass.initComponent.call(this);
    },

    /**
     * buildTopToolbar
     */
    buildTopToolbar : function() {
//        return [{
//            text: 'Adicionar',
//            iconCls: 'silk-page-white-add',
//            handler: this.onAdd,
//            scope: this
//        }, '-', {
//            text: 'Eliminar',
//            iconCls: 'silk-page-white-delete',
//            handler: this.onDelete,
//            scope: this
//        }
//        ];
        return [
               '->','Search: ', ' ',
               new Ext.ux.form.SearchField({
                   store: this.store,
                   width:320
               })
           ];
           
    },

    /**
     * buildBottomToolbar
     */
    buildBottomToolbar : function() {
    	var paginationToolbar = null;
    	
    	if( this.showConfigPanel == true ) {
    		paginationToolbar = new Ext.PagingToolbar({
    	        store: this.store,
    	        pageSize: 50,
    	        hideBorders: true,
    	        beforePageText:'P&aacute;gina',
    	        //displayInfo: true,
    	        //prependButtons: true,
    	        items: [
    	                '->',
    	                '<b>@cfg:</b>', '-', {
    	                text: 'autoSave',
    	                enableToggle: true,
    	                pressed: true,
    	                //tooltip: 'When enabled, Store will execute Ajax requests as soon as a Record becomes dirty.',
    	                tooltip: 'Cuando se habilita, la cache de almacenamiento ejecuta los pedidos asincronos una vez un Record es modificado.',
    	                toggleHandler: function(btn, pressed) {
    	                    this.store.autoSave = pressed;
    	                    if( this.linkedForm.documentDetailsStore !== null ) {
    	                    	this.linkedForm.documentDetailsStore.autoSave = pressed;
    	                    }
    	                },
    	                scope: this
    	            }, '-', {
    	                text: 'batch',
    	                enableToggle: true,
    	                pressed: true,
    	                //tooltip: 'When enabled, Store will batch all records for each type of CRUD verb into a single Ajax request.',
    	                tooltip: 'Cuando se habilita, la cache de almacenamiento agrupa las secuencias de acciones (CRUD) en una sola peticion asincronica (Ajax request) por tipo.',
    	                toggleHandler: function(btn, pressed) {
    	                    this.store.batch = pressed;
    	                },
    	                scope: this
    	            }, '-', {
    	                text: 'writeAllFields',
    	                enableToggle: true,
    	                //tooltip: 'When enabled, Writer will write *all* fields to the server -- not just those that changed.',
    	                tooltip: 'Cuando se habilita, *todos* los campos son enviados al servidor -- no solo aquellos que han sido modificados.',
    	                toggleHandler: function(btn, pressed) {
    	                    this.store.writer.writeAllFields = pressed;
    	                },
    	                scope: this
    	            }, '-', {
    	                text: 'Eliminado r&aacute;pido',
    	                enableToggle: true,
    	                tooltip: 'Cuando se habilita, no aparece el dialogo de confirmacion al eliminar un documento.',
    	                pressed: !this.application.showConfirmDialogOnRemoveRecord,
    	                toggleHandler: function(btn, pressed) {
    	                    this.application.showConfirmDialogOnRemoveRecord = !pressed;
    	                },
    	                scope: this
    	            }]
    	        //plugins: [filters]
    	    });	
    	}
    	else {
    		paginationToolbar = new Ext.PagingToolbar({ beforePageText:'P&aacute;gina', store: this.store, pageSize: 50, hideBorders: true});
    	}
    	
    	return paginationToolbar; 
    },

    /**
     * buildUI
     */
    buildUI : function() {
        return [{
            text: 'Save',
            iconCls: 'icon-save',
            handler: this.onSave,
            scope: this
        }];
    },

    /**
     * onSave
     */
    onSave : function(btn, ev) {
        this.store.save();
    },

    /**
     * onAdd
     * Esta funcion es ejecutada cada vez que se oprime el boton de Adicionar
     */
    onAdd : function(btn, ev) {
    	var _grid = this;
    	
    	var uploadDocumentForm = new Ext.FormPanel({
    		baseCls: 'x-plain',
            fileUpload: true,
            width: 500,
            frame: true,
            //title: 'File Upload Form',
            autoHeight: true,
            bodyStyle: 'padding: 5px 0px 0 30px;',
            labelWidth: 50,
            defaults: {
                anchor: '90%'
//                allowBlank: false,
//                msgTarget: 'side'
            },
            
            items: [{
            	xtype: 'fileuploadfield',
    	        id: 'fileinput',
    	        emptyText: 'Seleccione el documento a subir...',
    	        fieldLabel: 'Archivo',
    	        name: 'fileupload',
    	        buttonText: '',
    	        buttonCfg: {
    	            iconCls: 'page_white_acrobat'
    	        }
    		}],
            buttons: [{
                text: 'Subir',
                handler: function() {
            		// get the form
            		var form = uploadDocumentForm.getForm();
            		if (!form.isValid()) {
            			Ext.Msg.alert('Seleccione documento', 'Por favor selecciones un archivo PDF valido');
            			return;
            		}
            		
            		// chequeameo si la extension del documento seleccionado es valido despues de dar click en aceptar
            		if (!uploadDocumentForm.validateFileExtension()) {
            			Ext.Msg.alert('Seleccione documento', 'Por favor, seleccione un documento PDF v&aacute;lido con extensi&oacute;n .pdf');
            			return;
            		}
            		
            		// si todas las validaciones se ejecutaron sin problema, nos queda por ultimo ejecutar la function submit de la forma.
                    form.submit({
	                    url: BASE_URL + 'archivo/upload',
	                    waitTitle: 'Por favor espere...',
	                    waitMsg: 'Subiendo archivo al servidor...',
	                    success: function(/*formObject*/f, /*actionObject*/a){
                    		// TODO: completar los campos con los metadatos extraidos del archivo
                    		// hasta el momento Zend Pdf parece no extraer bien los datos; pero hay que buscar una manera.
                    		var r = new _grid.store.recordType({
	                            title : 'Ponga un titulo al documento',
	                            authors: 'Escriba el nombre del o de los autores en este campo',
	                            documentType: 1, // default documentType for creation = 1
	                            year: '',
	                            pages: '',
	                            publishedin: '',
	                            abstract: '',
	                            keywords: '',
	                            files: [a.result.filename]
	                            	//(new Date()).format('m/d/Y')
	                        });
                    		_grid.stopEditing();
                    		_grid.store.insert(0, r);
                    		_grid.startEditing(0, 0);
	                        if( !_grid.store.autoSave ) {
	                        	_grid.store.save();
	                        }
	                        	
	                        // fire a rowclick event with index = 0
	                        //_grid.forceReload = true;
	                        
	                        window.close();
	                        _grid.onRowClick(_grid, 0);
	                    },
	                    failure: function(/*formObject*/f, /*actionObject*/a){
	                    	if (a.failureType === Ext.form.Action.CONNECT_FAILURE) {
	                    		Ext.Msg.alert('Error', 'El servidor a reportado: '+a.response.status+' '+a.response.statusText);
	                    	}
	                    	if (a.failureType === Ext.form.Action.SERVER_INVALID) {
	                    		var obj = Ext.util.JSON.decode(a.response.responseText);
	                    		Ext.MessageBox.show({
	                    				title: a.result.errors.title,
	                    				msg: a.result.errors.errormsg,
	                    				buttons: Ext.MessageBox.OK,
	                    				icon: Ext.MessageBox.ERROR,
	                    	       });
	                    	}
	                    }
	                });
                }
            },{
                text: 'Cancelar',
                handler: function(){
            		uploadDocumentForm.getForm().reset();
            		window.close();
                }
            }]
        });
    	
    	// adicionar la function validateFileExtension al objecto uploadDocumentForm para validar
    	// en el cliente la extension del documento que selecciona.
    	uploadDocumentForm.validateFileExtension = function() {
    		var filename = this.getComponent('fileinput').getValue();
    		var exp = /^.*\.(pdf|PDF)$/;
    		return (exp.test(filename));
    	};
    	
        var window = new Ext.Window({
            title: 'Subir documento al servidor',
            width: 550,
            height:110,
            layout: 'fit',
            plain:true,
            resizable: false,
            modal: true,
            bodyStyle:'padding:5px;',
            buttonAlign:'center',
            items: uploadDocumentForm,
            listeners: {
            	show: function(win) {
        			// seleccinamos el elemento que contiene el input type=file y ejecutamos el evento onclick para
        			// que aparesca el dialogo de seleccion de documento a enviar al servidor.
            		var el = Ext.get('fileinput-file');
            		el.dom.click();
            	}
            }
        });

        window.show();
    },

    /**
     * onDelete
     */
    onDelete : function(btn, ev) {
        var rec = this.getSelectionModel().getSelected();
        if (!rec) {
            return false;
        }
        
        if( this.application.showConfirmDialogOnRemoveRecord ) {
        	Ext.Msg.show({ 
	        	title: 'Eliminar documento', 
	        	buttons: Ext.MessageBox.YESNO,
	        	msg: 'Desea eliminar el documento <i>' + rec.data.title + '</i>?', 
	        	icon: Ext.MessageBox.QUESTION,
	        	
	        	fn: function(btn){
        				if (btn == 'yes') { 
        					this.store.remove(rec);
        				}
        				this.checkStoreItems();
        		},
        		scope: this
        	});
        }
        else {
        	this.store.remove(rec);
        	this.checkStoreItems();
        }
    },
    
    onStoreLoad: function( store, records, options ) {
    	if( options.record != undefined ) {
    		if( options.action == 'create' ) {
    			var i = store.indexOfId(options.record.id);
    			var view = this.getView();
    			//view.focusRow(i);
    			//view.refresh();
    		}
    	}
    },
    
    checkStoreItems: function() {
    	if(this.getStore().getCount() == 0) {
    		var panel = this.ownerCt.ownerCt.items.itemAt(1);
    		panel.collapse(true);
    		// get the documentTabPanel and the the form
        	panel.items.itemAt(0).items.itemAt(0).removeAll();
        }
    	else {
    		this.getSelectionModel().selectFirstRow();
            this.onRowClick(this, 0);
    	}
    },
    
	onRowClick: function(g, index, ev) {
		// si existe algun record que se esta editando y no se ha salvado
		// preguntamos si queremos salvarlo o no en caso de que la opcion
		// autosave este desabilitada
		/*
		console.log('appview_admin.php rowclick, is record dirty: ' + documentForm.getForm().isDirty());
		documentForm.cascade( function(c) {
			if( c.isFormField ) {
				console.log(c.fieldLabel + ' = ' + c.isDirty());
			}
		}, this);
		*/
			console.info(viewport.items.itemAt(1));
			if(viewport.items.itemAt(1).collapsed) {
				viewport.items.itemAt(1).expand(true);	
				//viewport.items.itemAt(1).doLayout();
			}
		//viewport.items.itemAt(1).collase(true);
		//viewport.items.itemAt(1).expand(true);
//    				console.log('myApp.gridSelectedIndex = ' + myApp.gridSelectedIndex);
//    				console.log('index = ' + index);
		if (!g.store.autoSave && this.application.gridSelectedIndex != -1 && this.linkedForm.getForm().isDirty()) {
		Ext.Msg.show({ 
        	title: 'Selecci&oacute;n de documento', 
        	buttons: Ext.MessageBox.YESNO,
        	msg: 'Usted ha seleccionado otro documento con el modo <b>autoSave</b> desactivado y existen campos que han sido modificados. Desea guardas las modificaciones?', 
        	icon: Ext.MessageBox.QUESTION,
        	fn: function(btn){
    				if (btn == 'yes') {
    					this.linkedForm.onUpdate(null, null); 
    					this.record.commit();
    				}
    				else {
        			this.record.reject();
    				}

    				if(myApp.gridSelectedIndex != index) {
						this.application.gridSelectedIndex = index;
					    this.record = g.store.getAt(index);
					    this.linkedForm.loadRecord(this.record);
					}
    		},
    		scope: this
    	});	
		}
		else if (index == 0 || myApp.gridSelectedIndex != index) {
			this.application.gridSelectedIndex = index;
			this.record = g.store.getAt(index);
			this.linkedForm.loadRecord(this.record);
		}
    },
});

//Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
});